<template>
  <div class="add-control-enterprise" v-if="props.showDialog">
    <Dialog
      diaTop="3"
      headerName="添加企业"
      :showDialog="true"
      @close="close"
      @save="save"
      diaWidth="84"
      footerTop="10"
      :footer-show="false"
    >
      <template #content>
        <div class="content-wrap">
          <el-form ref="form" :model="formData" :inline="true">
            <el-form-item label="企业名称：" label-width="140px">
              <el-input v-model="formData.customername" clearable></el-input>
            </el-form-item>

            <!--  <el-form-item label="企业类别：">
              <el-input v-model="formData.managementtype" clearable></el-input>
              <el-select v-model="enterpriseType" placeholder="请选择">
                <el-option
                  v-for="item in enterpriseTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->

            <el-form-item label="状态：">
              <el-select
                v-model="formData.status"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                class="add btn"
                type="primary"
                style="background-color: #0874fa"
                @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px;"
                  ><Search /></el-icon
                >查询</el-button
              >
              <el-button
                class="add group"
                style="margin-left: 18px"
                @click="handlerAdd"
                ><el-icon
                  style="color: #fff; margin-right: 5px; font-size: 20px"
                  ><DocumentAdd /></el-icon
                >添加企业</el-button
              >
              <!-- <el-button
                class="add"
                style="margin-left: 18px; background-color: #f57618"
                @click="handlerImport"
              >
                <Svg name="daoru" width="20" height="20" color="#fff"> </Svg>
                &nbsp;导入</el-button
              > -->
            </el-form-item>
          </el-form>
          <div class="table-wrap data-wrap">
            <el-table
              :data="facilityList"
              border
              class="table-height"
              style="width: 100%"
              @selection-change="toggleRowSelection"
            >
              <el-table-column type="selection" align="center" />
              <!-- <el-table-column type="selection" align="center" /> -->
              <el-table-column
                prop="customername"
                align="center"
                label="企业名称"
              />
              <el-table-column
                prop="managementtype"
                align="center"
                label="企业类别"
              />
              <!-- <el-table-column prop="name" align="center" label="企业类别" /> -->
              <el-table-column
                width="340"
                prop="dischargelicense"
                align="center"
                label="排污许可证号"
              />
              <el-table-column
                prop="hbperson"
                width="100"
                align="center"
                label="联系人"
              />
              <el-table-column
                prop="hbmobile"
                align="center"
                label="手机号"
                width="160"
              />
              <el-table-column
                prop="customeraddress"
                align="center"
                label="企业地址"
              />
              <el-table-column
                prop="name"
                align="center"
                label="企业状态"
                width="140"
              >
                <template #default="{ row }">
                  <div>
                    {{
                      statusList.find((item) => item.value == row.status)?.label
                    }}
                  </div>
                </template>
              </el-table-column>
              <!-- 
              <el-table-column label="操作" width="180" align="center">
                <template #default="{ row }">
                  <div class="btn-wrap">
                    <button class="remove-btn" @click="editDetail">移除</button>
                  </div>
                </template>
              </el-table-column> -->
            </el-table>
            <div style="padding-right: 60px; margin-top: 25px">
              <Pagination
                v-model:currentPage="formData.page"
                :total="total"
                v-model:page-size="formData.pagesize"
                @getDataList="getList"
              />
            </div>
          </div>
        </div>
      </template>
    </Dialog>
    <OperateDia
      msg="确定添加选中的企业吗？"
      @save="selectEnterprise"
      v-model:showDialog="operateShowDialog"
    />
  </div>
</template>
<script setup>
import Dialog from "@/components/DialogCross";
import http from "@http";
import ElMessage from "@/components/ElMessage.js";
import OperateDia from "@/components/operateDialog";
import Upload from "@/components/Upload";
let props = defineProps(["showDialog", "addOrEditFlag", "groupId"]);
let emit = defineEmits(["update:showDialog", "save", "getList"]);
let params = reactive({});
let ids = ref("");
let facilityList = ref([]);
let operateShowDialog = ref(false);
let formData = reactive({ page: 1, pagesize: 10 });
let enterpriseTypeList = ref([]);
let statusList = ref([]);
let total = ref(0);
let enterpriseType = ref("1");
let url = ref("/enterprise/datalist");
let close = () => {
  emit("update:showDialog", false);
  emit("getList");
};
/* watch(
  () => enterpriseType.value,
  () => {
    // if (enterpriseType.value == 1) {
    url.value = "/enterprise/datalist";
    // } else {
    // url.value = "/enterpriseThird/datalist";
    // }
  }
); */
let selectEnterprise = () => {
  http({
    url: "/admPCNoticeGroupDetail/addEnterpriseToGroup",
    data: { enterpriseid: ids.value, groupid: props.groupId },
  }).then((res) => {
    if (res.code == 0) {
      ids.value = "";

      operateShowDialog.value = false;
      // ElMessage({ msg: "添加成功" });
      getList();
    }
  });
};
let save = () => {
  // http({
  //   url: "/admPCNoticeGroupDetail/addEnterpriseToGroup",
  //   data: formData,
  // }).then((res) => {

  // });
  emit("save");
};
let toggleRowSelection = (row) => {
  console.log(row);
  ids.value = row
    .map((item) => {
      return item.id;
    })
    .join(",");
  console.log(ids.value);
};
let handlerAdd = () => {
  console.log(ids.value);
  if (ids.value == "") {
    ElMessage({ msg: "请选择企业", type: "error" });
    return;
  }
  operateShowDialog.value = true;
};
let getList = () => {
  formData.groupid = props.groupId
  http({ url: "/admPCEnterprise/datalistForOutGroup", data: formData }).then(
    (res) => {
      if (res.code == 0) {
        facilityList.value = res.data.list;
        total.value = res.data.total;
        ElMessage({
          msg: "查询成功",
        });
      }
    }
  );
};
getList();
http({ url: "/listitem/getmodule", data: { module: "B05" } }).then((res) => {
  if (res.code == 0) {
    enterpriseTypeList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getmodule", data: { module: "B06" } }).then((res) => {
  if (res.code == 0) {
    statusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
let options = ref([{ label: "fds,", value: "2" }]);
let rules = {
  enterpriseName: [
    {
      required: true,
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
};
</script>
<style lang="scss" scoped>
/* 编辑企业详情页面 */
.add-control-enterprise {
  .content-wrap {
    padding-right: 30px;
    /* padding-bottom: 20px; */
    .facility-code {
      img {
        width: 182px;
        height: 226px;
      }
    }
    .data-wrap {
      height: 72vh;
      overflow-y: scroll;
      .table-height {
        height: 65vh;
      }
      :deep(.el-input) {
        width: 120px !important;
      }
      :deep(
          .el-input.el-input--default.el-pagination__editor.is-in-pagination
        ) {
        width: 50px !important;
      }
    }
    .img-wrap {
      width: 344px;
      height: 103px;
      background: #f7f7f7;
      border-radius: 5px;
      border: 1px solid #bfbfbf;
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        button {
          margin-top: 5px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 20px;
          color: #0874fa;
        }
        img {
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    font-family: Source Han Sans CN;
    font-weight: 500 !important;
    font-size: 20px !important;
    color: #000 !important;
  }
  :deep(.el-input) {
    width: 270px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }

  :deep(.el-select) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #666666 !important;
  }
  :deep(.el-input__inner) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #333;
  }
  :deep(.el-input) {
    /* width: 100% !important; */
  }
  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: none;
    font-family: Source Han Sans CN;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #666666 !important;
    background: #fff !important;
    border-radius: 5px !important;
    border: 1px solid #bfbfbf !important;

    height: 37px !important;
  }
  :deep(.el-input__inner::placeholder) {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 18px;
    color: #999999;
  }

  .add {
    background-color: #009944;
    box-shadow: none;
    color: #fff;
    width: 86px;
    height: 37px;

    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 18px;
  }
  .add.group {
    width: 120px;
  }
  :deep(.el-icon){
    font-size: 19px;
  }
}
</style>
